<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="./script/rem.js"></script>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
</head>

<body>

    <header class="goods-head" style="padding-top:0.4rem;">
        <div class="goods-head-l" tapmode onclick="closeWin()"><i class="fa fa-angle-left"></i></div>
        <h3>商品详情</h3>
        <div class="goods-head-r" tapmode onclick="collection()"><span id="collection_id" class="on"></span></div>
    </header>

    <div id="aui-slide">
        <div class="aui-slide-wrap">
            <div class="aui-slide-node bg-dark">
                <img src="./image/l1.png" />
            </div>
            <div class="aui-slide-node bg-dark">
                <img src="./image/l2.png" />
            </div>
            <div class="aui-slide-node bg-dark">
                <img src="./image/l3.png" />
            </div>
        </div>
        <div class="aui-slide-page-wrap">
            <!--分页容器-->
        </div>
        <div class="aui-slide-num"></div>
    </div>

    <script type="text/template" id="templateImage">
        <div class="aui-slide-wrap">
            {{~it:value:index}}
            <div class="aui-slide-node bg-dark">
                <img src="{{=value}}" />

            </div>
            {{~}}
        </div>
        <div class="aui-slide-page-wrap">
            <!--分页容器-->
        </div>
    </script>

    <div id='list'>

        <dl class="goods-1">
            <dt>毛孔脏东西浮出来·麦卢卡蜂蜜排毒清洁面膜 70g</dt>
            <dd>566金币</dd>
            <p><span class="goods-month"><i class="fa fa-diamond"></i>12月当月商品</span><span>已售200件</span></p>
        </dl>
        <ul class="goods-2 mb20">
            <h3>产品参数</h3>
            <li>商品名称<span>麦卢卡蜂蜜排毒清洁面膜</span></li>
            <li>重量<span>70g</span></li>
            <li>品牌<span>Swisse</span></li>
            <li>是否为特殊用途化妆品<span>否</span></li>
            <li>产地<span>澳大利亚</span></li>
        </ul>
        <div class="goods-3">
            <div class="goods-3-t">产品详情</div>
            <img src="image/goods-details.jpg">
        </div>

        <div class="cart-d-t"></div>
        <div class="goods-month-d">
            <span onclick="goods_details_on()">立即购买</span>
        </div>
    </div>


    <script type="text/template" id="template">

    <div class="shop-cart-bg">
        <div class="goods-box">
            <div class="goods-box-t">选择数量<i class="fa fa-close" onclick="goods_details_off()"></i></div>
            <div class="goods-box-m">
                <div class="shop-num">
                    <i class="jian" onclick="change_count('jian')"></i>
                    <!-- <input type="text" value="1" id='count' readonly="readonly"> -->
                    <input type="number" value="1" id='count'>
                    <i class="jia" onclick="change_count('jia')"></i>
                </div>
            </div>
            <!-- <div class="goods-box-btn" tapmode onclick="goods_details_on({{=it.data.id}})">确定</div> -->
        </div>
    </div>


        <dl class="goods-1">
            <dt>{{=it.data.title}}</dt>
            <dd>{{=it.data.gold_coin}}金币</dd>
            <p><span class="goods-month"><i class="fa fa-diamond"></i>{{=it.data.month_date}}月当月商品</span><span>{{=it.data.number_sales}}件</span></p>
        </dl>

        <!-- {{=it.data.html_desc}} -->
        <ul class="goods-2 mb20">
            <h3>{{=it.data.html_desc}}</h3>

        </ul>
        <div class="goods-3">
            <!-- <div class="goods-3-t">产品详情</div>
            <img src="image/goods-details.jpg"> -->
            <!-- {{=it.data.html_standard}} -->
            <h3>{{=it.data.html_standard}}</h3>

        </div>

        <div class="cart-d-t"></div>
        <div class="goods-month-d">
          <span onclick="goods_details_on({{=it.data.id}})">立即购买</span>
        </div>
    </script>

</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/index.js"></script>
<script type="text/javascript" src="./script/aui-slide.js"></script>
<script type="text/javascript">
    apiready = function() {
        token = $api.getStorage('token');
        token = 'Bearer ' + token;
        getData();
        // alert(api.pageParam.id);
    }

    function getData() {

        // 进度提示框
        api.showProgress({
            title: '努力加载中...',
            text: '请稍等...',
            modal: false
        });

        var id = api.pageParam.id;
        var token = $api.getStorage('token');

        var data_url = webAddress + '/api/product/' + id + '/show';
        api.ajax({
            url: data_url,
            method: 'get',
            data: {

            },
            headers: {
                Authorization: 'Bearer ' + token,
                Accept: 'application/json',
            },
        }, function(ret, err) {
            if (ret) {
                goods_id = ret.data.id;
                if(ret.data.is_collection == 0){
                    $("#collection_id").attr("class","on");
                }else if(ret.data.is_collection == 1){
                    $("#collection_id").attr("class","off");
                }
                // 关闭进度提示
                api.hideProgress();
                var date = new Date;
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                ret.data['month_date'] = month;
                var template = $api.byId('template');
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(ret);
                var list = $api.byId('list');
                $api.html(list, html);


                var template = $api.byId('templateImage');
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(ret.data.slides);
                var list = $api.byId('aui-slide');
                $api.html(list, html);

                var slide = new auiSlide({
                    container: document.getElementById("aui-slide"),
                    //"width":300, //宽度
                    "height": 240, //高度
                    "speed": 500, //速度
                    "autoPlay": 3000, //自动播放
                    "loop": true, //是否循环
                    "pageShow": true, //是否显示分页器
                    "pageStyle": 'dot', //分页器样式，分dot,line
                    'dotPosition': 'center', //当分页器样式为dot时控制分页器位置，left,center,right
                    currentPage: currentFun
                })

                $('img').css('width','100%');
                $('img').css('height','auto');


            } else {
                // alert(JSON.stringify(err));
            }
        });




    }





    function shop_order_details() {
        api.openWin({
            name: 'shop_order_details',
            url: './shop_order_details.html',
        });
    }

    function closeWin() {
        api.closeWin({});
    }
    // var slide = new auiSlide({
    //     container: document.getElementById("aui-slide"),
    //     // "width":300,
    //     "height": 260,
    //     "speed": 300,
    //     "pageShow": true,
    //     "autoPlay": 3000, //自动播放
    //     "pageStyle": 'dot',
    //     "loop": true,
    //     'dotPosition': 'center',
    //     currentPage: currentFun
    // })

    function currentFun(index) {
        // console.log(index);
    }


    function add_cart(index) {
        var temp = $(".shop-cart-bg").is(":visible"); //是否可见

        if (temp == false) {
            $(".shop-cart-bg").show();
            $(".goods-box").animate({
                bottom: "1rem"
            });
        } else {
            api.ajax({
                url: webAddress + '/api/cart/add',
                method: 'post',
                headers: {
                    'Authorization': token
                },
                data: {
                    values: {
                        product_id: index,
                        number: 1,
                        category: 1
                    },
                }
            }, function(ret, err) {
                if (ret) {

                    api.toast({
                        msg: '添加购物车成功!',
                        duration: 2000,
                        location: 'bottom'
                    });

                    api.execScript({
                        name: 'root',
                        frameName: 'shop',
                        script: 'get_cart();'
                    });


                } else {
                    // alert(JSON.stringify(err));
                }
            });

        }

    }

    function goods_details_on(index) {

        token = $api.getStorage('token');

        var tokens = 'Bearer ' + token;
        if (!token) {
            api.confirm({
                title: '提示!',
                msg: '是否登录?',
                buttons: ['确定', '取消']
            }, function(ret, err){
                if( ret ){
                    // alert( JSON.stringify( ret ) );
                    if (ret.buttonIndex == 1) {
                        api.openWin({
                            name: 'login',
                            url: './login.html',
                        });
                    }
                }else{
                    // alert( JSON.stringify( err ) );
                }
            });
            return false;
        }

        var temp = $(".shop-cart-bg").is(":visible"); //是否可见
        if (temp == false) {
            
            $(".shop-cart-bg").show();
            $(".goods-box").animate({
                bottom: "1rem"
            });
        } else {
            
            var count = $('#count').val();

            api.ajax({
                url: webAddress + '/api/cart/add',
                method: 'post',
                headers: {
                    'Authorization': tokens
                },
                data: {
                    values: {
                        product_id: index,
                        number: count,
                        category: 2
                    },
                }
            }, function(ret, err) {
                if (ret) {
                    // alert(JSON.stringify(ret));
                    // console.log(JSON.stringify(ret));
                    var ids = ret.data.id;
                    api.openWin({
                        name: 'shop_month_order_details',
                        url: './shop_month_order_details.html',
                        pageParam: {
                            ids: ids
                        }
                    });
                } else {
                    // alert(JSON.stringify(err));
                }
            });


        }

    }

    function collection(){
    var id = goods_id;
    var token = $api.getStorage('token');
    api.ajax({
        url: webAddress + '/api/product/' + id + '/collection',
        method: 'get',
        data: {

        },
        headers: {
            Authorization: 'Bearer ' + token,
            Accept: 'application/json',
        },
    },function(ret, err){
        if (ret) {
            // alert( JSON.stringify( ret ) );
            if (ret.status_code == 200) {
                if(ret.data.is_collection == 1){
                    api.toast({
                        msg: '收藏成功',
                        duration: 2000,
                        location: 'bottom'
                    });
                    $("#collection_id").attr("class","off");
                }else if(ret.data.is_collection == 0){
                    api.toast({
                        msg: '取消收藏成功',
                        duration: 2000,
                        location: 'bottom'
                    });
                    $("#collection_id").attr("class","on");
                }
                api.sendEvent({
                  name: 'new_reload'
                }); 
            }
        } else {
            api.toast({
                msg: '网络错误',
                duration: 2000,
                location: 'bottom'
            });
        }
    });
}


    function change_count(type) {

        var count = $('#count').val();
        if (type == 'jia') {
            count = parseInt(count) + 1;
            $('#count').val(count);

        } else {
            if (count <= 1) {
                return;
            }
            count = parseInt(count) - 1;
            $('#count').val(count);
        }

    }
</script>

</html>
